<template>
<div>
  <nav class="navbar navbar-default nav-top">
    <div class="container nav-container nav-wrap">
      <div class="navbar-header">
        <button class="navbar-toggle my-btn" data-toggle="collapse" data-target="#myCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="my-logo navbar-brand hidden-sm hidden-md hidden-lg">菜单</a>
      </div>
      <div id="myCollapse"  class="collapse navbar-collapse my-nav">
        <ul class="nav navbar-nav">
          <li @click="thisType(item.id)" :key="index" v-for="(item,index) in menuList"><a href="javascript:;">{{item.name}}</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container breadcrumb-wrap">
    <ol class="breadcrumb">
      <!-- <li><a @click="getHot" href="javascript:;">最热商品</a></li> -->
      <li v-if="!title"><a href="javascript:;">{{meunName || '最热商品'}}</a></li>
      <li v-else><a href="javascript:;">{{name}}</a></li>
      <li><a href="javascript:;">{{title}}</a></li>
    </ol>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      menuList: [],
      meunName: ''
    }
  },
  computed: {
    title () {
      return this.$store.state.title
    },
    name () {
      return this.$store.state.meunName
    }
  },
  methods: {
    thisType (id) {
      this.$store.state.title = ''
      this.$store.state.meunName = ''
      this.meunName = this.menuList.filter((item) => {
        return item.id === id
      })[0].name
      if (this.$route.name !== 'commodityList') {
        this.$router.push({
          path: '/',
          name: 'commodityList',
          params: {
            id: id
          }
        })
      } else {
        this.$store.state.commodityId = id
      }
    }
  },
  created () {
    this.$http.get('api/column').then((response) => {
      this.menuList = response.data.data
    }).catch((err) => {
      console.log(err)
    })
  }
}
</script>

<style lang="less" scoped>
.nav-top{
  overflow-x: hidden;
  margin-top: 30px;
  background: #fff;
  border-bottom: none;
  .my-logo{
    margin-left: 15px;
  }
  .nav-wrap{
    background: #f8f8f8;
    border-bottom: 1px solid #f8f8f8;
    min-height: 80px;
    padding: 0px;
    a{
      height: 80px;
      min-width: 80px;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
      padding: 15px;
      // margin: 15px;
    }
    li{
      border-right: 1px solid #e7e7e7;
      border-bottom: 1px solid #e7e7e7;
      &:hover{
        background-color: #e7e7e7;
      }
    }
  }
  .my-btn{
    margin-top: 0px;
    margin-bottom: 0px;
    height: 80px;
    width: 80px;
    border: none;
    span{
      margin-left: 18px;
    }
  }
}
.navbar-default{
  border:none;
}
.my-nav{
  padding: 0;
  .navbar-nav{
    margin: 0px;
  }
}
.breadcrumb-wrap{
  padding: 0px;
  a{
    font-size: 24px !important;
    .haizi{
      font-size: 24px !important;
    }
  }
}
</style>
